<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>异步组件</title>
    </head>
    <body>

        <div id="root">
            <p>{{ title }}</p>
            <async-component></async-component>
        </div>

        <!-- 导入 vue.js 3.x 核心库 -->
        <script src="../scripts/vue@3.2.31.js"></script>

        <script type="text/javascript">
            const options = {
                data(){
                    return { 
                        title: '测试异步组件' 
                    }
                }
            }
            const app = Vue.createApp(options);

            const AsyncComponent = Vue.defineAsyncComponent( function(){
                let executor = function(resolve,reject){
                    // 配置异步组件选项
                    let asyncOptions = {
                        template: `<div>{{ time }}</div>`,
                        computed: {
                            time(){
                                return new Date().toLocaleString();
                            }
                        }
                    }
                    // 在 3000 毫秒之后调用 resolve 函数将 asyncOptions 作为参数传递过去
                    setTimeout( resolve , 3000 , asyncOptions );
                }
                let promise = new Promise( executor );
                return promise ;
            } );
            
            app.component( 'async-component' , AsyncComponent );
            
            app.mount('#root');
        </script>
        
    </body>
</html>